<template>
  <render-table-column v-bind="{...columnProps, ...otherProps}" />
</template>

<script setup lang="jsx">
import { parseTime } from '@/utils/ruoyi'
import { formatMoney } from '@/utils'
import modal from '@/plugins/modal'

const props = defineProps({
  column: {
    type: Object,
    default: () => ({})
  }
})

const columnProps = reactive(props.column)

const otherProps = computed(() => {
  const type = columnProps?.type
  if (type === 'image' || type === 'switch') {
    return {
      width: 80,
      align: 'center'
    }
  }
  return {}
})

const slots = useSlots()

const { proxy } = getCurrentInstance()

const RenderTableColumn = (item) => {
  return (
    <el-table-column
      {...item}
      align={item.align ?? 'left'}
      showOverflowTooltip={item.prop !== 'operation' && item.type !== 'image' && item.showOverflowTooltip !== false}
    >
      {{
        default: (scope) => {
          if (item.render) return item.render(scope)
          if (slots[item.prop]) return slots[item.prop](scope)
          if (item.type === 'time') return parseTime(scope.row[item.prop], item.format)
          if (item.type === 'money') return formatMoney(scope.row[item.prop])
          if (item.type === 'switch') {
            return (
              <>
                {item.props.permissions ? (
                  <el-switch
                    inline-prompt
                    model-value={scope.row[item.prop]}
                    active-text={item.options[0].label}
                    inactive-text={item.options[1].label}
                    onClick={async () => {
                      const pageTable = proxy.$parent.$parent.$parent
                      pageTable.loading = true
                      await item.props.api({
                        id: scope.row.id,
                        [item.prop]: !scope.row[item.prop]
                      }).finally(() => {
                        pageTable.loading = false
                      })
                      modal.msgSuccess('操作成功')
                      scope.row[item.prop] = !scope.row[item.prop]
                    }}
                  />
                ) : (
                  <dict-tag options={item.options} value={scope.row[item.prop] + ''} />
                )}
              </>
            )
          }
          if (item.type === 'tag') return <dict-tag options={item.options} value={scope.row[item.prop] + ''} />
          if (item.type === 'image') {
            if (scope.row[item.prop]) {
              return (
                <el-popover placement="right" trigger="hover" width="auto">
                  {{
                    default: () => <img src={scope.row[item.prop]} style="max-width: 500px; max-height: 500px;"/>,
                    reference: () => <img src={scope.row[item.prop]} style="width: 40px; height: 40px; vertical-align: middle;"/>
                  }}
                </el-popover>
              )
            }
            return ''
          }
          return scope.row[item.prop]
        }
      }}
    </el-table-column>
  )
}
</script>